<template>
  <div class="episode_warp">
    <swiper
      :modules="[Navigation]"
      slides-per-view="auto"
      :slides-per-group-auto="true"
      :space-between="10"
      navigation
      @swiper="onSwiper"
      @slideChange="onSlideChange"
    >
      <swiper-slide v-for="(episode, index) in episodes" :key="index">
        <div class="episode_item" @click="playEpisode(episode)">
          <img :src="getStillUrl(episode.still_path)" alt="" class="episodes_img" />
          <div class="episode_name">{{ episode.episode_number }}. {{ episode.name }}</div>
        </div>
      </swiper-slide>
    </swiper>
  </div>
</template>
<script setup>
import { useRouter } from 'vue-router'
// import Swiper core and required modules
import { Navigation, Pagination, Scrollbar } from 'swiper/modules'
// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from 'swiper/vue'
// Import Swiper styles
import 'swiper/css'
import 'swiper/css/navigation'
import 'swiper/css/pagination'
import 'swiper/css/scrollbar'
const props = defineProps({
  episodes: {
    type: Array,
    default: () => [],
  },
})
const router = useRouter()
// 获取剧照的完整 URL still_path
const getStillUrl = (path) => `https://image.tmdb.org/t/p/original/${path}`
// Import Swiper styles
const onSwiper = (swiper) => {
  console.log(swiper)
}
const onSlideChange = () => {
  console.log('slide change')
}
const playEpisode = (episode) => {
  console.log('playEpisode >>>>>:', episode)
  router.push({
    path: '/home/tv/play',
    query: {
      id: episode.id,
    },
  })
}
</script>
<style scoped>
.episode_warp {
  margin-top: 10px;
}
.swiper-slide {
  width: 150px;
  /* height: 200px; */
  /* border: 1px solid red; */
}
.episode_item {
  width: 150px;
}
.episodes_img {
  width: 150px;
  height: 84px;
  border-radius: 5px;
}
.episode_name {
  width: 150px;
  word-wrap: break-word;
}
</style>
